<template>
  <div id="sunrainContent">
    <div class="chart">
      <div
        id="chart"
        class="chart"
        :style="{ height: (height - 40) * 1.6 + 'px', width: width }"
      ></div>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";
import { getBarometerDetail } from "@/api/dashboard";
import { sunrainOption, sunrainOption2 } from "./const";
export default {
  data() {
    return {
      chart: null,
    };
  },
  props: {
    segment: {
      type: String | Array,
      default: 99,
    },
    // year: {
    //   type: String | Array,
    // },
    height: {
      type: Number,
      default: 200,
    },
    width: {
      type: String,
      default: "200px",
    },
  },
  created() {
    // console.log("初始化渲染晴雨表：" + sunrainOption);
  },
  mounted() {
    this.getBarometerDetail();
  },
  watch: {
    segment: {
      handler(val) {
        console.log("segment渲染" + val);
        this.getBarometerDetail();
      },
      deep: true,
    },
  },
  computed: {},
  methods: {
    async getBarometerDetail() {
      const res = await getBarometerDetail({
        segment: this.segment,
      });
      this.initChart(res.body);
    },
    initChart(obj) {
      sunrainOption.xAxis.data = [];
      sunrainOption.xAxis.data1 = [];
      sunrainOption.series[0].data = [];
      sunrainOption.series[0].data1 = [];
      obj.forEach((item) => {
        sunrainOption.xAxis.data.push(item.contextName);
        const contextName = [];
        const annualizedIncomeRate = [];
        item.classifyNetWorthVos.forEach((citem) => {
          contextName.push(citem.contextName);
          annualizedIncomeRate.push(citem.annualizedIncomeRate);
        });
        sunrainOption.xAxis.data1.push(contextName);
        sunrainOption.series[0].data.push(item.annualizedIncomeRate);
        sunrainOption.series[0].data1.push(annualizedIncomeRate);
      });
      console.log(sunrainOption2);
      this.chart = echarts.init(document.getElementById("chart"));
      this.chart.setOption(sunrainOption);
    },
  },
};
</script>
<style lang="scss" scoped>
#sunrainContent {
  background: #fff;
}
</style>